<template>
    <div class="wrap">
        <slider>
            <div v-for="item in townBanners">
                <a :href="item.linkUrl">
                    <img class="needsclick" :src="item.picUrl">
                </a>
            </div>
        </slider>
        <section>
            <div class="head-title-b">
                <div class="head-title"><i></i><span>什么是特色小镇</span><i></i></div>
                <p class="s">特色小镇的定义与定位</p>
            </div>
            <div class="town-define">
                <p><span>特色小镇</span>，顾名思义，就是拥有某种特色的小镇，例如小镇以某个特色产业闻名，或者有某种特殊的风俗习惯、拥有某个旅游景点、或者专门实现了某一种功能（例如休闲度假）等。</p>
                <p><span>特色小镇定位</span>—— 坚持以产业、文化、旅游“融合发展”和生产、生活、生态“三位一体”。以产业为核心、以项目为载体、促成小空间大集聚、小平台大产出、小载体大创新。</p>
            </div>
        </section>
        <!-- 特色小镇总体特征 -->
        <section>
            <div class="head-title"><i></i><span>特色小镇总体特征</span><i></i></div>
            <div id="town-feature">
                <ul class="town-feature swiper-wrapper">
                    <li class="swiper-slide" v-for="item in features">
                        <div class="icon"><img :src="item.src"></div>
                        <div class="biaoti">{{item.title}}</div>
                        <span class="text">{{item.text}}</span>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 特色小镇规划编制特点 -->
        <section>
            <div class="head-title"><i></i><span>特色小镇规划编制特点</span><i></i></div>
            <div id="town-plan">
                <ul class="town-plan swiper-wrapper">
                    <li class="swiper-slide" v-for="item in plans">
                        <img :src="item.src">
                        <div class="town-plan-text">
                            <p>{{item.title}}</p>
                            <span>{{item.text}}</span>
                        </div>
                    </li>

                </ul>
            </div>
        </section>
        <section>
            <div class="head-title-b">
                <div class="head-title"><i></i><span>特色小镇运营模式</span><i></i></div>
                <p class="s">以企业为主，政府服务，政府负责小镇的定位，规则，基础设施和审批服务，引进民营企业建设特色小镇</p>
            </div>
            <ul class="town-operate">
                <li class="bg-f5f5f5">
                    <div class="icon town-bg1">政府引导</div>
                    <p>顶层设计，制度建设，执法治理</p>
                    <span class="c-9d9d9d">进行产业培育，创造制度环境，建设基础设施，提供公共服务，加强社会治理等。</span>
                </li>
                <li class="bg-f5f5f5">
                    <div class="icon town-bg2">市场运作</div>
                    <p>决定性作用</p>
                    <span class="c-9d9d9d">通过市场配置资源</span>
                </li>
                <li class="bg-f5f5f5">
                    <div class="icon town-bg3">企业运作</div>
                    <p>特色小镇的主角</p>
                    <span class="c-9d9d9d">寻找市场机会、进行资源整合、发挥自身优势</span>
                </li>
                <li class="bg-f5f5f5">
                    <div class="icon town-bg4">社会参与</div>
                    <p>参与/监督</p>
                    <span class="c-9d9d9d">共同参与、实施监督</span>
                </li>
            </ul>
        </section>
        <section class="container">
            <div class="head-title"><i></i><span>中厚提供的咨询服务</span><i></i></div>
            <ul class="town-consult">
                <li v-for="consult in consults">
                    <div class="head">{{consult.title}}</div>
                    <div class="content">
                        <span v-for="(item,index) in consult.list"><span class="c-836834">{{index+1}}.</span>{{item.content}}</span>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 中厚明德产业优势 -->
        <section>
            <div class="head-title"><i></i><span>中厚明德产业优势</span><i></i></div>
            <!-- 经典案例 -->
            <div class="s-part">
                <div class="title margin-t0"><i></i>经典案例</div>
                <div id="town-case">
                    <ul class="indus-case swiper-wrapper">
                        <li class="swiper-slide" v-for="item in cases">
                            <a target="_blank" :href="item.link">
                                <img :src="item.src">
                                <p>{{item.title}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
             <!-- 产业优势 -->
            <div class="s-part">
                <div class="title"><i></i>产业优势</div>
                <p class="s-title">整合产业链各方机构，打造一站式孵化平台</p>
                <ul class="town-indus">
                    <li class="bg1">产业选择</li>
                    <li></li>
                    <li class="bg2">产业导入</li>
                    <li></li>
                    <li class="bg3">产业培育</li>
                </ul>
                <ul class="town-indus1">
                    <li></li>
                    <li class="bg4">产业聚集</li>
                    <li></li>
                    <li class="bg5">产业整合</li>
                </ul>
                <div class="town-indus-text">通过整合开发链及产业链各个环节上数百家机构，形成与政府及主办开发商，联合孵化特色小（城）镇的一套办法，为特色小城镇的创建提供全产业链全程联合服务解决方案。</div>
            </div>
            <!-- 特色小镇孵化器 -->
            <div class="s-part">
                <div class="title"><i></i>特色小镇孵化器</div>
                <div class="town-incubator">
                    <em>特色小（城）镇全程联合服务</em>
                    <div><span>政府投融资平台</span>
                    <span>投资商</span><span>开发商</span><span>建造商</span>
                    <span>运营商</span><span>服务商</span></div>
                </div>
                <div class="town-incubator-img"><img src="../../common/img/town-incubator.png"></div>
                <div class="town-incubator-pro">
                    <div class="term">
                        <div class="tag">（一）顶层设计服务</div>
                        <ul class="sub-term sub-term1">
                            <li>
                                <p>规划引领</p>
                                <div>以高质量规划引领特色小镇的科学发展，可从政府管理层面把控。<br/>
                                比如云南省规定没有编制规划的小镇，不予审批项目，不予拨付建设资金。
                                </div>
                            </li>
                            <li class="bg-efecf4">
                                <p>多规合一</p>
                                <div>开发建设规划与旅游规划，土地利用规划，城市规划，产业规划，生态规划等协调。
                                </div>
                            </li>
                            <li class="bg-efecf4">
                                <p>落地实施</p>
                                <div>在固话过程中，导入产业资源，旅游IP，运营管理机构，投融资机构等，实现全要素一体化资源导入。
                                </div>
                            </li>
                            <li>
                                <p>互联网+</p>
                                <div>运用互联网思维，实现小镇规划中的基础分析，功能产品，保障体系，落地实施，城市营销等方面的突破。
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="term">
                        <div class="tag">（二）全要素导入服务</div>
                        <div class="sub-term sub-term2">
                            <p>元要素导入服务，即通过全要素招商大会，实现“四招，五引入”，招投资商，招开发商招运营商，招服务商；引进资金资本，智库平台，品牌企业，人才团队，IP项目，从而为特色小（城）镇的发展提供支撑，如图所示：</p>
                            <img src="../../common/img/town-incubator1.png">
                            <p>全要素招商摈弃了政府投资，招商引资的传统做法，通过投资，开发，运营，服务全产业链的招商模式，保证了特色小城镇建设的切实落地。</p>
                        </div>
                    </div>
                    <div class="term">
                        <div class="tag">（三）持续性后期服务</div>
                        <div class="sub-term sub-term3">
                            <p>元要素导入服务，即通过全要素招商大会，实现“四招，五引入”，招投资商，招开发商招运营商，招服务商；引进资金资本，智库平台，品牌企业，人才团队，IP项目，从而为特色小（城）镇的发展提供支撑。</p>
                            <img src="../../common/img/town-incubator3.png">
                            <img src="../../common/img/town-incubator4.png">
                        </div>
                    </div>
                </div>
            </div>
        </section>


    <!-- <section>
        <div class="head-title"><i></i><span>精彩动态</span><i></i></div>
        <div id="town-dynamic">
            <ul class="town-dynamic swiper-wrapper">

                @foreach($toolsService->getAlbumList(1) as $k => $v)
                <li class="swiper-slide">
                    <img src="{{ $v['url'] }}"data-setid="{{$v['subtype']}}"  alt="{{$v['title']}}" />
                    <div class="text">{{ $v['title'] }}</div>
                </li>
                @endforeach
            </ul>
        </div>
    </section> -->
    <m-bottom></m-bottom>
    </div>
</template>
<script>
import MBottom from 'components/m-bottom/m-bottom'
import Slider from 'base/slider/slider'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default{
    data(){
        return{
            townBanners:[
                {
                    picUrl:require("../../common/img/banner/plan-town1.jpg"),
                    linkUrl:"#"
                },
                {
                    picUrl:require("../../common/img/banner/plan-town2.jpg"),
                    linkUrl:"#"
                },
                {
                    picUrl:require("../../common/img/banner/plan-town3.jpg"),
                    linkUrl:"#"
                }
            ],
            features:[
                {
                    src:require("../../common/img/town-f1.png"),
                    title:"以特色的产业及环境资源为基础",
                    text:"产业资源是特色小镇打造的前提；环境资源是特色小镇打造的重要依托；资源如何转化为面向市场的核心吸引力是其核心指向；"
                },
                {
                    src:require("../../common/img/town-f2.png"),
                    title:"以坚定的政府政策及投融资支持为依托",
                    text:"以产业为引领；实现\"产业+文化+旅游+社区\"的四重功能；各功能有机的整合与融合；"
                },
                {
                    src:require("../../common/img/town-f3.png"),
                    title:"以产城一体化综合开发为手段",
                    text:"产业的综合发展；功能的综合配置，土地的综合开发；配套的综合建设，目标的综合打造等；"
                },
                {
                    src:require("../../common/img/town-f4.png"),
                    title:"以泛旅游为引擎与目标归宿",
                    text:"拥有完善的城镇及旅游配套设施；拥有超越一般景区的较高品质服务；"
                },
                {
                    src:require("../../common/img/town-f5.png"),
                    title:"以产业链开发及房地产开发为盈利核心",
                    text:"土地一级开发：直接获利，享受升值效益；房地产开发：房产销售，房产回收经营；项目开发：经营收益等；"
                }
            ],
            plans:[
                {
                    src:require("../../common/img/town-fea1.jpg"),
                    title:"（一）特色小镇规划编制范围",
                    text:"特色小镇规划范围内编制概念规划和控规（3平方公里左右）;特色小镇建设范围内编制城市设计（1平方公里左右）;  特色小镇重点门户深化设计，突出节点要素；"
                },
                {
                    src:require("../../common/img/town-fea2.jpg"),
                    title:"（二）特色小镇规划编制要求",
                    text:"新型综合性建设规划，应对新形势下的有效规划供给特色小镇规划=产业规划+文化策划+旅游规划+建设规划；"
                },
                {
                    src:require("../../common/img/town-fea3.jpg"),
                    title:"（三）特色小镇申报材料",
                    text:"申报材料具体包括：申报文件、特色小镇创建方案（含附图、附表）和特色小镇创建方案摘要；"
                },
                {
                    src:require("../../common/img/town-fea4.jpg"),
                    title:"（四）特色小镇申报程序",
                    text:"由州（市）政府按创建全国一流和创建全省一流两个类型  向省特色小镇发展领导小组办公室统一报送州（市）特色小镇创建名单及相关材料；"
                }
            ],
            consults:[
                {
                    "title":"前期诊断",
                    list:[
                        {"content":"专家到家"},
                        {"content":"产业价值分析"},
                        {"content":"产业定位"},
                        {"content":"产业选择"},
                        {"content":"市场调研"},
                        {"content":"培训辅导"},
                        {"content":"项目意向"},
                        {"content":"对策建议"}
                    ]
                },
                {
                    "title":"立项申报",
                    list:[
                        {"content":"项目策划"},
                        {"content":"产品策划"},
                        {"content":"前期调研"},
                        {"content":"小镇概规"},
                        {"content":"申报方案编制"},
                        {"content":"小镇申报及落地"}
                    ]
                },
                {
                    "title":"投融资模式",
                    list:[
                        {"content":"融资方案策划"},
                        {"content":"PPP模式咨询"},
                        {"content":"基金资金"},
                        {"content":"商业银行信贷"},
                        {"content":"投融资平台构建"},
                        {"content":"投融对接"},
                        {"content":"中厚私董会"}
                    ]
                },
                {
                    "title":"招商策划",
                    list:[
                        {"content":"招商产业定位"},
                        {"content":"招商组织架构"},
                        {"content":"招商推广策略"},
                        {"content":"策略制定"},
                        {"content":"招商保障措施"},
                        {"content":"运营模式"}
                    ]
                }
            ],
            cases:[
                {
                    link:"think_tank_town_detail.html",
                    src:require("../../common/img/townCase/1.jpg"),
                    title:"古中国教育小镇"
                },
                {
                    link:"think_tank_town_detail.html",
                    src:require("../../common/img/townCase/2.jpg"),
                    title:"“宇翔盛泰·天空之城”飞行小镇"
                },{
                    link:"think_tank_town_detail.html",
                    src:require("../../common/img/townCase/3.jpg"),
                    title:"中国·客天下"
                },{
                    link:"think_tank_town_detail.html",
                    src:require("../../common/img/townCase/4.jpg"),
                    title:"欢乐驴游田园综合体"
                },{
                    link:"think_tank_town_detail.html",
                    src:require("../../common/img/townCase/5.jpg"),
                    title:"意大利足球特色小镇"
                },{
                    link:"think_tank_town_detail.html",
                    src:require("../../common/img/townCase/6.jpg"),
                    title:"山东泰安中华孔子城"
                }
            ]
        }
    },
    components:{
        Slider,
        MBottom
    },
    mounted(){
        var townFeaSwiper = new Swiper('#town-feature', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true,
        });
        var townPlanSwiper = new Swiper('#town-plan', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true,
        });
        var townCaseSwiper = new Swiper('#town-case', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true,
        });
        var townDynamicSwiper = new Swiper('#town-dynamic', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true,
        });

    }
}
</script>
<style>
.town-consult li{
    width:100%;
    background-color: #fff;
    border:1px solid #ededed;
    margin-bottom: 30px;
}
.town-consult li:last-child{margin-bottom: 0;}
.town-consult li .head{
    width: 100%;
    height:42px;
    font-size:16px;
    line-height: 42px;
    text-align: center;
    background-color: #ebd9ce;
    color: #836834;
}
.town-consult li .content{
    line-height: 24px;
    letter-spacing: 1px;
    padding:18px 12px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.town-consult li .content>span{
    float: left;
    width: 50%;
    text-align: center;
}
.town-consult li .content>span span{
    color: #836834;}
.town-consult li:nth-child(2n) .head{
    background-color: #e6e8ef;
    color: #4d5272;
}
.town-consult li:nth-child(2n) .content>span span{
    color: #4d5272;
}
</style>
